<template>
  <div class="radio-maybe-like" v-if="radioLike.length > 0">
    <home-nav :title="store.currentInfo.topTitle" :more="false"/>
    <ul>
      <li v-for="radio in radioLike" :key="radio?.id" class="mb-2 flex text-sm">
        <div class="w-13 h-13 mr-2">
          <img class="w-full h-full" :src="radio.picUrl" alt="">
        </div>
        <div class="flex flex-col justify-around">
          <span class="w-40 truncate yu-textColor-hover" @click="jumpDjRadio(radio.id)">{{ radio.name }}</span>
          <span class="text-xs yu-textColor-hover" @click="jumpHomePage(radio.dj.userId)">by {{ radio.dj.nickname }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import HomeNav  from '@/components/HomeNav/index.vue'
import {useStore} from "@/store/index";
import {reactive, toRefs} from "vue";
import {useRouter} from "vue-router";

const store = useStore()
const router = useRouter()

const data = reactive({
  radioLike: []
})
const { radioLike } = toRefs(data)

// 获取推荐电台
store.getDjPersonalizeRecommend().then(res => {
  data.radioLike = res
  // console.log(res)
})

// 跳转到用户主页
const jumpHomePage = (id) => {
  router.push({
    path: '/user/homepage',
    query: {
      id
    }
  })
}

// 跳转到电台详情
const jumpDjRadio = (id) => {
  router.push({
    path: '/dj-radio',
    query: {
      id
    }
  })
}
</script>

<style scoped>

</style>
